<template>
	<view class="h-screen flex flex-col">
		<uni-nav-bar color="#4766B3" height="120rpx" statusBar backgroundColor="transparent" :border="false"
			left-icon="left" @clickLeft="back">
			<view class="box-double flex justify-center items-center">
				<view class="box-left flex justify-center" @click="handleOpenInfo(0)">
					<view class="box-avatar">
						<image v-if="options._user_list['0'].relat == 0" :src="headimg" mode="aspectFill"></image>
						<image v-else-if="options._user_list['0'].gender == 0" src="/static/imgs/img_w_man.png" mode="aspectFill">
						</image>
						<image v-else src="/static/imgs/img_man.png" mode="aspectFill"></image>
					</view>
					<view class="name ellipsis">{{options._user_list['0'].name}}</view>
				</view>
				<ImageBoxVue src="/static/icons/vs.png" width="94rpx" height="114rpx"></ImageBoxVue>
				<view class="box-right flex justify-center" @click="handleOpenInfo(1)">
					<view class="name ellipsis">{{options._user_list['1'].name}}</view>
					<view class="box-avatar">
						<image v-if="options._user_list['1'].relat == 0" :src="headimg" mode="aspectFill"></image>
						<image v-else-if="options._user_list['1'].gender == 0" src="/static/imgs/img_w_man.png" mode="aspectFill">
						</image>
						<image v-else src="/static/imgs/img_man.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</uni-nav-bar>
		<view class="flex p-20 border-b" style="position: relative;">
			<scroll-view :scroll-x="true">
				<view class="tab-box-in">
					<view :class="['tab-item', tab == i ? 'tab-item-active' : '']" v-for="e,i in doubleTabList1" :key="i"
						@click="TabChange(i)">
						<text class="text-sm">{{e}}</text>
						<view class="" :class="tab == i ? 'tab-line-active' : 'tab-line'"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-30">
					<view class="flex justify-between items-center">
						<!-- <uni-tooltip content="tooltip显示的内容" placement="bottom">
							<text>本命盘</text>
						</uni-tooltip> -->
						<view class="flex items-center">
							<!-- <switch style="zoom: 60%;" :checked="!classics" @change="ClassicsSwitch" /> -->
							<view @click.stop="ClassicsSwitch" class="bg-time flex justify-center items-center">
								{{classics ? '古典' : '现代'}}
							</view>
							<view @click.stop="openPopup" class="bg-params flex justify-center items-center">参数</view>
						</view>
						<view>{{dayjs(options._user_list['0'].birth).format('YYYY.MM.DD')}}</view>
						<view class="bg-btn flex py-10 w-[150rpx] justify-center items-center" @click.stop="ToArchiveList">
							<text>切换星图</text>
						</view>
					</view>
					<!--  -->
					<view class="py-30">
						<view style="color: #fff;text-align: center;"
							:style="{'--background': skin[skinIndex], '--roll': skinRoll[skinIndex]}"
							class="w-[690rpx] h-[690rpx] border-[#BADEFF] border-4 border-solid rounded-full svg-box-outer"
							:class="_svg ? '' : 'bg-black'">
							<!-- <image :src="_svg" mode="scaleToFill" style="width: 100%;height: 100%;"></image> -->
							<view v-html="_svg" class="svg-box"></view>
						</view>
					</view>
					<!--  -->
					<view class="flex justify-between items-center">
						<view @click.stop="openSkinPopup" class="bg-btn flex py-10 w-[150rpx] justify-center items-center">
							<!-- <ImageBoxVue src="/static/icons/clothing.png" width="40rpx" height="40rpx"></ImageBoxVue> -->
							<text class="">更换式样</text>
						</view>
						<view>{{dayjs(options._user_list['1'].birth).format('YYYY.MM.DD')}}</view>
						<view @click.stop="openOptionsPopup" class="bg-btn flex py-10 w-[150rpx] justify-center items-center">
							<!-- <ImageBoxVue src="/static/icons/parameter.png" width="48rpx" height="48rpx"></ImageBoxVue> -->
							<text class="">参数列表</text>
						</view>
					</view>
					<view class="flex py-20 border-b" style="position: relative;">
						<scroll-view :scroll-x="true">
							<view class="tab-box-in">
								<view :class="['tab-item', tab2 == i ? 'tab-item-active' : '']" v-for="e,i in doubleTabList2" :key="i"
									@click="TabChange2(i)">
									<text class="text-sm">{{e}}</text>
									<view class="" :class="tab2 == i ? 'tab-line-active' : 'tab-line'"></view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="box-supplement pb-20 mb-20 mt-20">
						<view class="title flex justify-center items-center">
							<text>问题为</text>
						</view>
						<view>
							<uni-easyinput class="bg-white pl-20" type="textarea" v-model="startData.describe" :inputBorder="false"
								placeholder="我最近总是觉得做什么都没干劲总觉得自己很无能，想知道自己是不是抑郁了."></uni-easyinput>
						</view>
					</view>
					<view class="btn-pay flex justify-center mt-30">
						<view class="btn_pay_red flex justify-center items-center" @click="onPlay(1)">
							<text>确定支付</text>
							<view class="pay-num flex items-center">
								<ImageBoxVue src="/static/icons/red.png" width="28rpx" height="28rpx"></ImageBoxVue>
								<text>{{redPrice}}钻</text>
							</view>
							<text>解读</text>
						</view>
					</view>
					<view class="btn-pay flex justify-center mt-30">
						<view class="btn_pay_blue flex justify-center items-center" @click="onPlay(0)">
							<text>确定支付</text>
							<view class="pay-num flex items-center">
								<ImageBoxVue src="/static/icons/blue.png" width="28rpx" height="28rpx"></ImageBoxVue>
								<text>{{bluePrice}}钻</text>
							</view>
							<text>解读</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<uni-popup ref="popup" type="bottom" style="overflow: auto;">
			<view class="bg-white">
				<view class="flex items-center p-20" style="gap: 10rpx;">
					<text class="flex-1 options-popup-title">盘配置</text>
					<view @click.stop="getData" class="options-popup-title-button">确定</view>
					<view @click.stop="closePopup" class="options-popup-title-button">取消</view>
				</view>
				<scroll-view class="options-popup-box" :scroll-y="true">
					<!-- <view :style="{display: [0, 1, 2].includes(tab) ? 'flex' : 'none'}" class="options-item user-card flex-col" v-for="(item, index) in options._user_list" :key="index">
						<uni-easyinput style="font-size: 24rpx;" placeholder-style="font-size: 24rpx" v-model="item.name" placeholder="清输入姓名"></uni-easyinput>
						<uni-data-picker placeholder="请选择出生地点"
							popup-title="请选择出生地点"
							:localdata="cityJSON"
							v-model="item.location"
							@change="locationChange($event, index)"></uni-data-picker>
						<uni-datetime-picker v-model="item.birth" placeholder="清选择出生时间"></uni-datetime-picker>
					</view> -->

					<view class="flex-col options-item" v-for="(item, index) in options.custom" :key="index">
						<text class="options-title">{{item.text}}</text>
						<view class="flex options-line" v-for="(i, t) in item.list" :key="t">
							<text class="flex-1">{{i.text}}</text>
							<uni-number-box v-if="HasDegree(i)" v-model="i.degree" :step="0.1" style="padding-right: 20rpx;" />
							<switch style="zoom: 60%;" :checked="i.checked" :disabled="i.disable"
								@change="OptionsSwitch($event, index, t)" />
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="skinPopup" type="bottom">
			<view class="bg-white" style="padding-bottom: 40px;">
				<view class="flex items-center p-20" style="gap: 10rpx;">
					<text class="flex-1 options-popup-title">皮肤</text>
					<view @click.stop="closeSkinPopup" class="options-popup-title-button">取消</view>
				</view>
				<view class="flex justify-between" style="padding: 0 20rpx;">
					<view class="skin" v-for="(item, index) in skin" :key="index"
						:style="{background: item, borderColor: skinRoll[index]}" @click.stop="SelectSkin(index)">
						<radio v-if="index == skinIndex" :checked="true" color="#329eff" class="skin-select" />
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="optionsPopup" type="bottom" style="overflow: auto;">
			<view class="bg-white">
				<view class="flex items-center p-20" style="gap: 10rpx;">
					<text class="flex-1 options-popup-title">参数</text>
					<view @click.stop="closeOptionsPopup" class="options-popup-title-button">确定</view>
				</view>
				<scroll-view class="options-popup-box" :scroll-y="true">
					<view style="margin: 20rpx 20rpx 0;" class="flex flex-col" v-if="_svgOptions.planet">
						<text class="options-title" style="padding-top: 0;">星体信息</text>
						<view class="options-table">
							<view class="flex options-table-line" style="background: rgba(84, 181, 255, .6);">
								<text class="flex-1">星体</text>
								<text class="flex-2">星座度数</text>
								<text class="flex-1">宫位</text>
								<text class="flex-1">逆行</text>
							</view>
							<view class="flex options-table-line" v-for="e,i in _svgOptions.planet" :key="i">
								<text class="flex-1">
									<text class="options-symbol">{{e.planet_font}}</text>
									{{e.planet_chinese}}
								</text>
								<text class="flex-2">
									{{e.sign.sign_chinese}}
									<text class="options-symbol">{{e.sign.sign_font}}</text>
									{{e.sign.deg}}°{{e.sign.min}}′
								</text>
								<text class="flex-1">{{e.house_id}}宫</text>
								<text class="flex-1">{{e.speed < 0 ? '逆行' : ''}}</text>
							</view>
						</view>
					</view>
					<view style="margin: 20rpx 20rpx 0;gap: 20rpx;" class="flex flex-col" v-if="_svgOptions.planet">
						<text class="options-title" style="padding-top: 0;">相位表</text>
						<image style="width: 100%;" :src="_svgOptions.planetArrSvg" mode="widthFix"></image>
					</view>
					<view style="margin: 20rpx 20rpx 0;" class="flex flex-col" v-if="_svgOptions.house">
						<text class="options-title" style="padding-top: 0;">宫主星</text>
						<view class="options-table">
							<view class="flex options-table-line" style="background: rgba(84, 181, 255, .6);">
								<text class="flex-1">宫位</text>
								<text class="flex-2">星座度数</text>
								<text class="flex-1">宫主星</text>
								<text class="flex-2">飞入</text>
							</view>
							<view class="flex options-table-line" v-for="e,i in _svgOptions.house" :key="i">
								<text class="flex-1">{{e.house_id}}宫</text>
								<text class="flex-2">
									{{e.sign.sign_chinese}}
									<text class="options-symbol">{{e.sign.sign_font}}</text>
									{{e.sign.deg}}°{{e.sign.min}}′
								</text>
								<text class="flex-1">
									<text class="options-symbol">{{e.main_planet[0].planet_font}}</text>
									{{e.main_planet[0].planet_chinese}}
								</text>
								<text class="flex-2">
									<block v-if="e.fly_house">
										{{e.fly_house.sign.sign_chinese}}
										<text class="options-symbol">{{e.fly_house.sign.sign_font}}</text>
										{{e.fly_house.house_id}}宫
									</block>
								</text>
							</view>
						</view>
					</view>
					<view style="margin: 20rpx 20rpx 0;" class="flex flex-col" v-if="_svgOptions.planet && tab == 5">
						<text class="options-title" style="padding-top: 0;">先天黄道</text>
						<view class="options-table xiantian">
							<view class="flex options-table-line" style="background: rgba(84, 181, 255, .6);">
								<text class="flex-2">星体</text>
								<text class="flex-3">黄经度数</text>
								<text class="flex-1">庙</text>
								<text class="flex-1">旺</text>
								<text class="flex-3">三分</text>
								<text class="flex-1">界</text>
								<text class="flex-1">面</text>
								<text class="flex-1">陷</text>
								<text class="flex-1">弱</text>
								<text class="flex-2">得分</text>
							</view>
							<view class="flex options-table-line" v-for="e,i in _svgOptions.planet" :key="i">
								<text class="flex-2">
									<text class="options-symbol">{{e.planet_font}}</text>
								</text>
								<text class="flex-3">

									<!-- {{e.sign.sign_chinese}}
									<text class="options-symbol">{{e.sign.sign_font}}</text>
									{{e.sign.deg}}°{{e.sign.min}}′ -->
								</text>
								<text class="flex-1 options-symbol">{{e.Xiantian[5]}}</text>
								<text class="flex-1 options-symbol">{{e.Xiantian[4]}}</text>
								<text class="flex-3 options-symbol">{{e.Xiantian[3]}}</text>
								<text class="flex-1 options-symbol">{{e.Xiantian[2]}}</text>
								<text class="flex-1 options-symbol">{{e.Xiantian[1]}}</text>
								<text class="flex-1 options-symbol">{{e.Xiantian[-4]}}</text>
								<text class="flex-1 options-symbol">{{e.Xiantian[-5]}}</text>
								<text class="flex-2 options-symbol">{{e.congenital_score.score}}</text>
							</view>
						</view>
					</view>
					<view style="margin: 20rpx 20rpx 0;" class="flex flex-col" v-if="_svgOptions.planet && tab == 5">
						<text class="options-title" style="padding-top: 0;">后天黄道</text>
						<view class="options-table houtian">
							<view class="flex options-table-line" style="background: rgba(84, 181, 255, .6);">
								<text class="flex-2">星体</text>
								<text class="flex-5">黄经度数</text>
								<text class="flex-1">宫</text>
								<text class="flex-2">守护</text>
								<text class="flex-2">㬬升</text>
								<text class="flex-7">后天附属状态</text>
							</view>
							<view class="flex options-table-line" v-for="e,i in _svgOptions.planet" :key="i">
								<text class="flex-2">
									<text class="options-symbol">{{e.planet_font}}</text>
								</text>
								<text class="flex-5"></text>
								<text class="flex-1"></text>
								<text class="flex-2"></text>
								<text class="flex-2"></text>
								<text class="flex-7"></text>
							</view>
						</view>
					</view>
					<!-- <view style="margin: 20rpx 20rpx 0;" class="flex flex-col" v-if="_svgOptions.into_list || _svgOptions.acceptance_list">
						<text class="options-title" style="padding-top: 0;">特征参数</text>
						<view class="options-table">
							<view class="flex options-table-line" style="background: rgba(84, 181, 255, .6);">
								<text class="flex-1">接纳和互溶</text>
							</view>
							<block v-if="_svgOptions.into_list">
								<view class="flex options-table-line" v-for="e,i in _svgOptions.into_list" :key="i">
									<text class="flex-1">
										<text class="options-symbol">{{e.planet_font}}</text>
										{{e.planet_chinese}}
									</text>
								</view>
							</block>
						</view>
					</view> -->
					<view style="height: 40rpx;"></view>
				</scroll-view>
			</view>
		</uni-popup>
		<UserInfoPopupVue v-model="avatarPopup" :user="user"></UserInfoPopupVue>
	</view>
</template>

<script setup>
	function test() {
		uni.navigateTo({
			url: './card-spread'
		})
	}

	import {
		ref,
		onMounted,
		getCurrentInstance,
		computed
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import config from '@/config/index.js'
	import dayjs from "dayjs"
	import cityJSON from "@/static/city.json";
	import cityJs from '@/static/city';
	import communityApi from '@/apis/apiList/communityApi';
	import userApi from '@/apis/apiList/userApi';
	import UserInfoPopupVue from './components/UserInfoPopup.vue';

	const tab = ref(0) // tab索引
	const tab2 = ref() // tab2索引
	const _svg = ref('')
	const _svgOptions = ref({})
	const popup = ref(null) //参数弹窗组件ref
	const skinPopup = ref(null) //皮肤弹窗组件ref
	const optionsPopup = ref(null) //参数弹窗组件ref
	const avatarPopup = ref(false) //用户信息popup
	const relatList = config.relatList

	const skin = ref(['#ffffff', '#000000', '#eeeeee', '#eafeff', '#fff1f8', '#0a1737'])
	const skinRoll = ref(['#ececec', '#202020', '#f5f5f7', '#ddfcff', '#feedf5', '#03091f'])
	const skinIndex = ref(0)
	const subtitle = ref('组合盘')
	const classics = ref(0) //是否经典盘
	const tabList = ["组合盘", "月返照", "日返照", "天象", "本命", "行运", "三限", "次限", "法达", "小限" /*, "日运语料", "推运数据"*/ ]
	const doubleTabList1 = ["比较盘A", "组合盘", "马盘A", "马盘A三限", "马盘A次限", "本命盘A", "组合三限", "组合次限"]
	const doubleTabList2 = ["比较盘B", "时空盘", "马盘B", "马盘B三限", "马盘B次限", "本命盘B", "时空三限", "时空次限"]
	const cases = ref({
		0: '合',
		180: '冲',
		120: '拱',
		90: '刑',
		60: '六合',
		30: '十二',
		36: '十分',
		45: '八分',
		72: '五分',
		135: '补八',
		144: '补五',
		150: '梅花'
	})
	const casesColor = ref({
		0: '193, 159, 116',
		180: '113, 113, 138',
		120: '40, 153, 71',
		90: '235, 88, 96',
		60: '111, 166, 198',
		30: '224, 159, 0',
		36: '37, 142, 255',
		45: '243, 88, 27',
		72: '48, 125, 239',
		135: '27, 160, 53',
		144: '246, 226, 200',
		150: '239, 79, 140'
	})
	const groupTab = ref(0) //"合盘"三个盘的tab序列

	const userInfo = ref({}) // 用户信息
	const user = ref({}) // 选择用户信息
	const name1 = ref('') //姓名
	const birthPlaceText = ref('')
	let birthPlace = {} //出生地点
	const birthTime = ref('') //出生时间
	const secondBirthTime = ref('') //出生时间
	const gender = ref(0) // 性别
	const relat = ref(0) // 是否是自己
	const headimg = ref(0) // 头像

	const startData = ref({})

	const requestOptions = {
		base: 'http://www.xingpan.vip/astrology',
		access_token: '8gs6g5i5g1r3k582d2f08yy96h3',
		tabs: [
			'/chart/comparision',
			'/chart/composite',
			'/chart/marks',
			'/chart/marksThirprogr',
			'/chart/marksSecprogr',
			'/chart/natal',
			'/chart/compositeThirprogr',
			'/chart/compositeSecondary'
		],
		tabs2: [
			'/chart/comparision',
			'/chart/timesmidpoint',
			'/chart/marks',
			'/chart/marksThirprogr',
			'/chart/marksSecprogr',
			'/chart/natal',
			'/chart/timesmidpointThirprogr',
			'/chart/timesmidpointSecprogr'
		]
	}

	const MoonAndSunOptions = ref({
		_user_list: {
			'0': {
				name: '',
				location: '',
				longitude: '',
				latitude: '',
				tz: '',
				birth: ''
			},
			'1': {
				name: '',
				location: '',
				longitude: '',
				latitude: '',
				tz: '',
				birth: ''
			}
		}
	})
	const options = ref({
		_user_list: {
			'0': {
				name: '',
				location: '',
				longitude: '',
				latitude: '',
				tz: '',
				birth: ''
			},
			'1': {
				name: '',
				location: '',
				longitude: '',
				latitude: '',
				tz: '',
				birth: ''
			}
		},
		custom: {
			planets: {
				text: '主星体',
				checked: false,
				list: [{
						value: '0',
						text: '太阳',
						disable: true,
						checked: true,
						degree: 0
					},
					{
						value: '1',
						text: '月亮',
						disable: true,
						checked: true,
						degree: 0
					},
					{
						value: '2',
						text: '水星',
						checked: true,
						degree: 0
					},
					{
						value: '3',
						text: '金星',
						checked: true,
						degree: 0
					},
					{
						value: '4',
						text: '火星',
						checked: true,
						degree: 0
					},
					{
						value: '5',
						text: '木星',
						checked: true,
						degree: 0
					},
					{
						value: '6',
						text: '土星',
						checked: true,
						degree: 0
					},
					{
						value: '7',
						text: '天王星',
						checked: true,
						degree: 0
					},
					{
						value: '8',
						text: '海王星',
						checked: true,
						degree: 0
					},
					{
						value: '9',
						text: '冥王星',
						checked: true,
						degree: 0
					},
					{
						value: 't',
						text: '真实的月切点',
						checked: true,
						degree: 0
					}
				]
			},
			asteroids: {
				text: '小行星',
				checked: false,
				list: [{
						value: 'D',
						text: '凯龙星',
						checked: false,
						degree: 0
					},
					{
						value: 'F',
						text: '谷神星',
						checked: false,
						degree: 0
					},
					{
						value: 'E',
						text: '人龙星',
						checked: false,
						degree: 0
					},
					{
						value: 'G',
						text: '智神星',
						checked: false,
						degree: 0
					},
					{
						value: 'H',
						text: '婚神星',
						checked: false,
						degree: 0
					},
					{
						value: 'I',
						text: '灶神星',
						checked: false,
						degree: 0
					},
					{
						value: 'xs433',
						text: '爱神星',
						checked: false,
						degree: 0
					},
					{
						value: 'xs16',
						text: '灵神星',
						checked: false,
						degree: 0
					}
				]
			},
			imaginary: {
				text: '虚点',
				checked: false,
				list: [{
						value: '10',
						text: '上升',
						checked: true,
						degree: 0
					},
					{
						value: '11',
						text: '中天',
						checked: true,
						degree: 0
					},
					{
						value: '19',
						text: '天底点',
						checked: false,
						degree: 0
					},
					{
						value: '18',
						text: '下降点',
						checked: false,
						degree: 0
					},
					{
						value: 'm',
						text: '北交点',
						checked: true,
						degree: 0
					},
					{
						value: '21',
						text: '南交点',
						checked: false,
						degree: 0
					},
					{
						value: 'A',
						text: '莉莉丝点',
						checked: false,
						degree: 0
					},
					{
						value: 'pFortune',
						text: '福点',
						checked: false,
						degree: 0
					},
					{
						value: '13',
						text: '宿命点',
						checked: false,
						degree: 0
					},
					{
						value: '14',
						text: '东升点',
						checked: false,
						degree: 0
					},
					{
						value: '20',
						text: '日月中点',
						checked: false,
						degree: 0
					}
				]
			},
			imaginaryStar: {
				text: '虚星',
				checked: false,
				list: [{
						value: 'J',
						text: '丘比特',
						checked: false,
						degree: 0
					},
					{
						value: 'K',
						text: '哈迪斯',
						checked: false,
						degree: 0
					},
					{
						value: 'L',
						text: '宙斯',
						checked: false,
						degree: 0
					},
					{
						value: 'M',
						text: '克洛诺斯',
						checked: false,
						degree: 0
					},
					{
						value: 'N',
						text: '阿波罗',
						checked: false,
						degree: 0
					},
					{
						value: 'O',
						text: '阿德门图斯',
						checked: false,
						degree: 0
					},
					{
						value: 'P',
						text: '弗卡奴斯',
						checked: false,
						degree: 0
					},
					{
						value: 'Q',
						text: '波塞东',
						checked: false,
						degree: 0
					}
				]
			},
			mainPhase: {
				text: '主要相位',
				checked: false,
				list: [{
						value: '0',
						text: '合相(0°)',
						checked: true,
						degree: 6.0
					},
					{
						value: '180',
						text: '冲相(180°)',
						checked: true,
						degree: 5.0
					},
					{
						value: '120',
						text: '拱相(120°)',
						checked: true,
						degree: 5.0
					},
					{
						value: '90',
						text: '刑相(90°)',
						checked: true,
						degree: 5.0
					},
					{
						value: '60',
						text: '六合相(60°)',
						checked: true,
						degree: 3.0
					}
				]
			},
			otherPhase: {
				text: '其他相位',
				checked: false,
				list: [{
						value: '30',
						text: '十二分相(30°)',
						checked: false,
						degree: 0
					},
					{
						value: '36',
						text: '十分相(36°)',
						checked: false,
						degree: 0
					},
					{
						value: '45',
						text: '八分相(45°)',
						checked: false,
						degree: 0
					},
					{
						value: '72',
						text: '五分相(72°)',
						checked: false,
						degree: 0
					},
					{
						value: '135',
						text: '补八分相(135°)',
						checked: false,
						degree: 0
					},
					{
						value: '144',
						text: '补五分相(144°)',
						checked: false,
						degree: 0
					},
					{
						value: '150',
						text: '梅花相(150°)',
						checked: false,
						degree: 0
					}
				]
			}
		}
	})

	const postFrom = ref({
		paysts: 0, //支付方式
		replenishment: "", // 补充说明
		sinpay: "", //支付金额
		prv: 1, //私有
		pret: 1, //解读人数
		sec: 0, //保密
		exp: 0, //游客讲解 
		obs: 0, //评论
		sdes: 0, // 是否有牌阵信息，0否 1是
		describe: "", //描述
		selcard: 0, // 
		ppst: 2, // 帖子类型 0 普通贴 1定向贴 2 快速贴
	})
	const systemSetting = ref([]) // 系统设置列表
	const redPrice = computed(() => {
		let price = 0
		systemSetting.value.map(item => {
			if (item.name == 'Fastquestion_doublestarRed') {
				price = item.kbidc
			}
		})
		return price
	})
	const bluePrice = computed(() => {
		let price = 0
		systemSetting.value.map(item => {
			if (item.name == 'Fastquestion_doublestarBlue') {
				price = item.kbidc + 12
			}
		})
		return price
	})
	onMounted(() => {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();

		eventChannel.on('astrolabeDoublePage', function(data) {
			console.log('astrolabeDoublePage', data)
			startData.value = {
				...startData.value,
				...data
			}
			startData.value.starsts = 1
		})
	})

	/**
	 * @description 初始化
	 */
	onLoad(_options => {
		userInfo.value = uni.getStorageSync('user')
		systemSetting.value = uni.getStorageSync('dict');
		if (_options.hasOwnProperty('tab') && _options.hasOwnProperty('ids')) {
			tab.value = Number(_options.tab)
			InitPan(_options.ids.split(','))
		} else {
			tab.value = 1
			InitPan()
		}
		skinIndex.value = uni.getStorageSync('astrolabe-skin') || 0
		GetOptions()
	})

	const handleOpenInfo = (i) => {
		console.log(startData.value.selcard, i)
		let opt = {
			id: startData.value.selcard.split(',')[i]
		}
		userApi.getDossierinfoByid(opt).then(res => {
			user.value = res.data
			avatarPopup.value = true
		})
	}

	async function InitPan(ids) {
		name1.value = uni.getStorageSync('user').nickname
		gender.value = uni.getStorageSync('user').gender
		headimg.value = uni.getStorageSync('user').headimg
		birthPlace.longitude = '116.40'
		birthPlace.latitude = '39.90'
		birthPlace.tz = '8'
		birthTime.value = dayjs(uni.getStorageSync('user').birday).format('YYYY-MM-DD HH:mm:ss')
		secondBirthTime.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')

		if (ids) {
			for (let i in ids) {
				let _info = await GetArchiveById(ids[i])
				startData.value.selcard = ids.join(',')
				options.value._user_list[i] = {
					name: _info.nickname,
					location: '',
					longitude: _info.birlongitude,
					latitude: _info.birlatitude,
					tz: _info.timezone,
					birth: dayjs(_info.birthday).format('YYYY-MM-DD HH:mm:ss'),
					relat: _info.relat,
					gender: _info.gender
				}
			}
		}
		getData()
	}
	const onPlay = (type) => {
		if (startData.value.describe == '') {
			uni.showToast({
				icon: "none",
				title: "请填写您的问题！"
			})
			return
		}
		const params = {
			"member.id": uni.getStorageSync('user').id,
			"bbsplate.id": startData.value.bbsplateId,
			...postFrom.value,
			paysts: type,
			selcard: startData.value.selcard,
			posts: startData.value.posts,
			describe: startData.value.describe,
			starsts: startData.value.starsts,
			sinpay: type == 0 ? bluePrice.value : redPrice.value,
		}
		console.log(params)
		// popupShow.value = true
		// return
		communityApi.generatePoss(params).then(res => {
			if (res.code == 200) {
				uni.showToast({
					icon: "none",
					title: '测试成功'
				})
				setTimeout(() => {
					uni.switchTab({
						url: `/pages/tabbar/user`
					})
				}, 1000)
			} else {
				popupShow.value = true
			}
		})
	}

	/**
	 * @description 去往档案列表页
	 */
	function ToArchiveList() {
		uni.astrolabePage = archives => {
			options.value._user_list['0'].name = archives['0'].name
			options.value._user_list['0'].latitude = archives['0'].latitude
			options.value._user_list['0'].longitude = archives['0'].longitude
			options.value._user_list['0'].tz = archives['0'].tz
			options.value._user_list['0'].birth = archives['0'].birth
			options.value._user_list['0'].relat = archives['0'].relat
			options.value._user_list['0'].gender = archives['0'].gender

			options.value._user_list['1'].name = archives['1'].name
			options.value._user_list['1'].latitude = archives['1'].latitude
			options.value._user_list['1'].longitude = archives['1'].longitude
			options.value._user_list['1'].tz = archives['1'].tz
			options.value._user_list['1'].birth = archives['1'].birth
			options.value._user_list['1'].relat = archives['1'].relat
			options.value._user_list['1'].gender = archives['1'].gender
			getData()
		}
		uni.navigateTo({
			url: `/pages/views/archiveList?needCount=2&tab=${tab.value}`
		})
	}

	function TabChange(index) {
		tab.value = index
		_svgOptions.value = {}
		_svg.value = ''
		if (options.value._user_list['0'].latitude &&
			options.value._user_list['0'].longitude &&
			options.value._user_list['0'].tz &&
			options.value._user_list['0'].birth &&
			options.value._user_list['1'].latitude &&
			options.value._user_list['1'].longitude &&
			options.value._user_list['1'].tz &&
			options.value._user_list['1'].birth) {
			getData()
		}
	}

	function TabChange2(index) {
		tab2.value = index
		_svgOptions.value = {}
		_svg.value = ''
		if (options.value._user_list['0'].latitude &&
			options.value._user_list['0'].longitude &&
			options.value._user_list['0'].tz &&
			options.value._user_list['0'].birth &&
			options.value._user_list['1'].latitude &&
			options.value._user_list['1'].longitude &&
			options.value._user_list['1'].tz &&
			options.value._user_list['1'].birth) {
			getData2()
		}
	}

	function ClassicsSwitch() {
		classics.value = classics.value ? 0 : 1
		getData()
	}

	/**
	 * @description 是否有度数
	 */
	function HasDegree(item) {
		return item.hasOwnProperty('degree')
	}

	function locationChange(e, index) {
		try {
			let location = e.detail.value.map(item => item.value)
			let _location = [...new Set(location)]

			const regex = new RegExp(`\\{([^{}]|(\\{[^{}]*?\\})*?)*?${_location[_location.length - 1]}.*?\\}`)
			let aim = JSON.stringify(cityJs).match(regex)[0]
			aim = JSON.parse(aim)

			options.value._user_list[index].longitude = aim.longitude
			options.value._user_list[index].latitude = aim.latitude
			options.value._user_list[index].tz = aim.tz
		} catch (e) {
			console.log(e)
			options.value._user_list['0'].longitude = ''
			options.value._user_list['0'].latitude = ''
			options.value._user_list['0'].tz = ''
			options.value._user_list['0'].location = ''
			options.value._user_list['1'].longitude = ''
			options.value._user_list['1'].latitude = ''
			options.value._user_list['1'].tz = ''
			options.value._user_list['1'].location = ''
		}
	}

	function BirthPlaceChange(e) {
		try {
			let location = e.detail.value.map(item => item.value)
			console.log(location)
			let _location = [...new Set(location)]

			const regex = new RegExp(`\\{([^{}]|(\\{[^{}]*?\\})*?)*?${_location[_location.length - 1]}.*?\\}`)
			let aim = JSON.stringify(cityJs).match(regex)[0]
			aim = JSON.parse(aim)

			/* birthPlace.longitude = aim.longitude
			birthPlace.latitude = aim.latitude
			birthPlace.tz = aim.tz */

			MoonAndSunOptions.value._user_list['1'].latitude = aim.latitude
			MoonAndSunOptions.value._user_list['1'].longitude = aim.longitude
			MoonAndSunOptions.value._user_list['1'].tz = aim.tz
		} catch (e) {
			console.log(e)
			/* birthPlace.longitude = ''
			birthPlace.latitude = ''
			birthPlace.tz = ''
			birthPlaceText = '' */
			MoonAndSunOptions.value._user_list['1'].latitude = ''
			MoonAndSunOptions.value._user_list['1'].longitude = ''
			MoonAndSunOptions.value._user_list['1'].tz = ''
			MoonAndSunOptions.value._user_list['1'].location = ''
		}
	}

	/**
	 * @description 参数小开关
	 * @param {Object} e
	 * @param {Object} index
	 * @param {Object} t
	 */
	function OptionsSwitch(e, index, t) {
		let {
			value
		} = e.detail
		options.value.custom[index].list[t].checked = value
	}

	/**
	 * @description 打开弹窗
	 *
	 */
	function openPopup() {
		popup.value.open()
	}


	/**
	 * @description 关闭弹窗
	 */
	function closePopup() {
		popup.value.close()
	}

	/**
	 * @description 打开皮肤弹窗
	 */
	function openSkinPopup() {
		skinPopup.value.open()
	}

	/**
	 * @description 关闭皮肤弹窗
	 */
	function closeSkinPopup() {
		skinPopup.value.close()
	}

	/**
	 * @description 打开参数弹窗
	 */
	function openOptionsPopup() {
		optionsPopup.value.open()
	}

	/**
	 * @description 关闭参数弹窗
	 */
	function closeOptionsPopup() {
		optionsPopup.value.close()
	}

	/**
	 * @description 选择皮肤
	 * @param {Object} index
	 */
	function SelectSkin(index) {
		skinIndex.value = index
		uni.setStorageSync('astrolabe-skin', index)
		closeSkinPopup()
	}

	/**
	 * @description 获取档案
	 * @param {Object} id
	 */
	async function GetArchiveById(id) {
		let info = await uni.request({
			url: config.baseUrl + '/app/getDossierinfoByid?' + `id=${id}`,
			method: 'POST'
		})
		return info.data.data
	}

	/**
	 * @description 获取星盘配置
	 */
	function GetOptions() {
		uni.request({
			url: requestOptions.base + '/common/planetconfig',
			method: 'POST',
			data: {
				access_token: requestOptions.access_token
			}
		}).then(res => {
			let {
				data: resData
			} = res
			let {
				data
			} = resData
			options.value = {
				...options.value,
				...data
			}
		})
	}

	/**
	 * @description 获取星盘数据
	 */
	function getData() {
		let full = options.value._user_list['0'].latitude &&
			options.value._user_list['0'].longitude &&
			options.value._user_list['0'].tz &&
			options.value._user_list['0'].birth &&
			options.value._user_list['1'].latitude &&
			options.value._user_list['1'].longitude &&
			options.value._user_list['1'].tz &&
			options.value._user_list['1'].birth
		if (!full) {
			uni.showToast({
				title: '未选择档案或档案信息不全',
				icon: 'none'
			})
			return
		}
		if ([3, 4, 6, 7].includes(tab.value)) {
			if (!secondBirthTime.value) {
				uni.showToast({
					title: '未选择推运时间',
					icon: 'none'
				})
				return
			}
		}

		let data = new FormData()

		data.append('access_token', requestOptions.access_token)

		data.append('svg_type', 1)

		data.append('h_sys', classics.value ? 'W' : 'K')

		let _planets = [
			...options.value.custom.planets.list.filter(item => item.checked).map(item => item.value),
			...options.value.custom.asteroids.list.filter(item => item.checked).map(item => item.value),
			...options.value.custom.imaginaryStar.list.filter(item => item.checked).map(item => item.value)
		]
		for (let i of _planets) {
			data.append('planets[]', i)
		}

		let _planet_xs = options.value.custom.asteroids.list.filter(item => item.checked).map(item => item.value)
		for (let i of _planet_xs) {
			data.append('planet_xs[]', i)
		}

		let _virtual = options.value.custom.imaginary.list.filter(item => item.checked).map(item => item.value)
		for (let i of _virtual) {
			data.append('virtual[]', i)
		}

		let _planet_degree = Object.assign({},
			...options.value.custom.planets.list
			.filter(item => item.checked)
			.map(item => ({
				[item.value]: item.degree
			})),
			...options.value.custom.imaginaryStar.list
			.filter(item => item.checked)
			.map(item => ({
				[item.value]: item.degree
			})),
			...options.value.custom.asteroids.list
			.filter(item => item.checked)
			.map(item => ({
				[item.value]: item.degree
			})),
			...options.value.custom.imaginary.list
			.filter(item => item.checked)
			.map(item => ({
				[item.value]: item.degree
			}))
		)
		for (let i in _planet_degree) {
			data.append(`planet_degree[${i}]`, _planet_degree[i])
		}

		let _phase = Object.assign({},
			...options.value.custom.mainPhase.list
			.filter(item => item.checked)
			.map(item => ({
				[item.value]: item.degree
			})),
			...options.value.custom.otherPhase.list
			.filter(item => item.checked)
			.map(item => ({
				[item.value]: item.degree
			}))
		)
		for (let i in _phase) {
			data.append(`phase[${i}]`, _phase[i])
		}

		if (tab.value != 5) {
			data.append('user_list[0][longitude]', options.value._user_list[0].longitude)
			data.append('user_list[0][latitude]', options.value._user_list[0].latitude)
			data.append('user_list[0][tz]', options.value._user_list[0].tz)
			data.append('user_list[0][birthday]', options.value._user_list[0].birth)
			data.append('user_list[1][longitude]', options.value._user_list[1].longitude)
			data.append('user_list[1][latitude]', options.value._user_list[1].latitude)
			data.append('user_list[1][tz]', options.value._user_list[1].tz)
			data.append('user_list[1][birthday]', options.value._user_list[1].birth)
		} else {
			data.append('longitude', options.value._user_list[0].longitude)
			data.append('latitude', options.value._user_list[0].latitude)
			data.append('tz', options.value._user_list[0].tz)
			data.append('birthday', options.value._user_list[0].birth)
			data.append('tomorrow_type', 1)
			data.append('tomorrow_number', 99)
		}
		if ([3, 4, 6, 7].includes(tab.value)) {
			data.append('transitday', secondBirthTime.value)
		}

		let url = requestOptions.base + requestOptions.tabs[tab.value]
		console.log(url)
		console.log(data)
		uni.showLoading({
			title: '生成中'
		})
		uni.request({
			url: url + `?${data.get()}`,
			method: 'POST'
		}).then(res => {
			console.log(res)
			let {
				data: resData
			} = res
			let {
				data,
				msg
			} = resData
			uni.showToast({
				title: msg || '参数错误',
				icon: 'none'
			})
			let {
				svg
			} = data
			let mid = JSON.parse(JSON.stringify(data))
			let house = JSON.parse(JSON.stringify(mid.house))
			// let house = mid.house
			let planetArr = [...mid.planet.map(item => item.planet_chinese)]
			let planetArrSvg = ''

			outerLoop:
				for (let i = 0; i < planetArr.length; i++) {
					for (let j = 0; j < planetArr.length; j++) {
						if (planetArr[i - 1] == planetArr[j - 1]) continue outerLoop
						let planet = mid.planet.find(item => item.planet_chinese == planetArr[i])
						let degree = planet.planet_allow_degree.find(item => item.planet_chinese == planetArr[j])
						let text = degree ? cases.value[degree.allow] : ''
						let color = '#333',
							bg = 'transparent'
						if (text) {
							color = `rgb(${casesColor.value[degree.allow]})`
							bg = `rgba(${casesColor.value[degree.allow]}, 0.3)`
						}
						planetArrSvg += `
							<rect x="${(j + 1) * 50}" y="${i * 50}" width="50" height="50"
								fill="${bg}" stroke="#e9e9e9" stroke-width="2"/>
							<text x="${(j + 1) * 50 + 25}" y="${i * 50 + 25}"
								font-family="Arial" font-size="22"
								text-anchor="middle" dominant-baseline="middle" fill="${color}">${text}</text>
						`
					}
				}
			for (let i = 0; i < planetArr.length; i++) {
				let text = planetArr[i]
				if (text.length > 2) {
					text = text.replace('星', '')
				}
				planetArrSvg += `
					<rect x="${(i + 1) * 50}" y="${i * 50}" width="50" height="50"
						fill="#f7f7f7" stroke="#e9e9e9" stroke-width="2"/>
					<text x="${(i + 1) * 50 + 25}" y="${i * 50 + 25}"
						font-family="Arial" font-size="22"
						text-anchor="middle" dominant-baseline="middle">${text}</text>
				`
				if (i > 0) {
					planetArrSvg += `
						<rect x="0" y="${i * 50}" width="50" height="50"
							fill="#f7f7f7" stroke="#e9e9e9" stroke-width="2"/>
						<text x="25" y="${i * 50 + 25}"
							font-family="Arial" font-size="22"
							text-anchor="middle" dominant-baseline="middle">${text}</text>
					`
				}
			}
			planetArrSvg =
				`<svg xmlns="http://www.w3.org/2000/svg" width="${50 * (planetArr.length + 1)}" height="${50 * planetArr.length}">` +
				planetArrSvg + '</svg>'
			mid.planetArrSvg = `data:image/svg+xml;base64,${btoa(planetArrSvg)}`
			// console.log(mid.planetArrSvg)
			mid.house = mid.house.map(item => {
				if (item.planet_array.length) {
					item.fly_house = house.find(e => e.main_planet[0].planet_font == item.planet_array[0].planet_font)
					return item
				}
				return item
			})
			if (tab.value == 5) {
				let planet = mid.planet
				for (let i in planet) {
					mid.planet[i].Xiantian = {}
					let congenital_score = planet[i].congenital_score.list
					for (let j in congenital_score) {
						let type = congenital_score[j].type
						if (type == 3) {
							let _list = congenital_score[j].list
							let text = ''
							for (let k in _list) {
								let find = planet.find(item => item.code_name == _list[k].planet_code)
								if (find) {
									text += find.planet_font + ''
								}
							}
							mid.planet[i].Xiantian[type] = text
						} else {
							mid.planet[i].Xiantian[type] = mid.planet.find(item => item.code_name == congenital_score[j]
								.planet_code).planet_font
						}
					}
				}
				// console.log(mid.planet.map(item => item.Xiantian))
			}
			delete mid.svg
			_svgOptions.value = mid
			_svg.value = svg
			uni.hideLoading()
			closePopup()
		}).catch(e => {
			console.log(e, 'ssss')
			uni.showToast({
				title: '未知错误',
				icon: 'none'
			})
			uni.hideLoading()
		})
	}

	/**
	 * @description 获取星盘数据
	 */
	function getData2() {
		let full = options.value._user_list['0'].latitude &&
			options.value._user_list['0'].longitude &&
			options.value._user_list['0'].tz &&
			options.value._user_list['0'].birth &&
			options.value._user_list['1'].latitude &&
			options.value._user_list['1'].longitude &&
			options.value._user_list['1'].tz &&
			options.value._user_list['1'].birth
		if (!full) {
			uni.showToast({
				title: '未选择档案或档案信息不全',
				icon: 'none'
			})
			return
		}
		if ([3, 4, 6, 7].includes(tab2.value)) {
			if (!secondBirthTime.value) {
				uni.showToast({
					title: '未选择推运时间',
					icon: 'none'
				})
				return
			}
		}

		let data = new FormData()

		data.append('access_token', requestOptions.access_token)

		data.append('svg_type', 1)

		data.append('h_sys', classics.value ? 'W' : 'K')

		let _planets = [
			...options.value.custom.planets.list.filter(item => item.checked).map(item => item.value),
			...options.value.custom.asteroids.list.filter(item => item.checked).map(item => item.value),
			...options.value.custom.imaginaryStar.list.filter(item => item.checked).map(item => item.value)
		]
		for (let i of _planets) {
			data.append('planets[]', i)
		}

		let _planet_xs = options.value.custom.asteroids.list.filter(item => item.checked).map(item => item.value)
		for (let i of _planet_xs) {
			data.append('planet_xs[]', i)
		}

		let _virtual = options.value.custom.imaginary.list.filter(item => item.checked).map(item => item.value)
		for (let i of _virtual) {
			data.append('virtual[]', i)
		}

		let _planet_degree = Object.assign({},
			...options.value.custom.planets.list
			.filter(item => item.checked)
			.map(item => ({
				[item.value]: item.degree
			})),
			...options.value.custom.imaginaryStar.list
			.filter(item => item.checked)
			.map(item => ({
				[item.value]: item.degree
			})),
			...options.value.custom.asteroids.list
			.filter(item => item.checked)
			.map(item => ({
				[item.value]: item.degree
			})),
			...options.value.custom.imaginary.list
			.filter(item => item.checked)
			.map(item => ({
				[item.value]: item.degree
			}))
		)
		for (let i in _planet_degree) {
			data.append(`planet_degree[${i}]`, _planet_degree[i])
		}

		let _phase = Object.assign({},
			...options.value.custom.mainPhase.list
			.filter(item => item.checked)
			.map(item => ({
				[item.value]: item.degree
			})),
			...options.value.custom.otherPhase.list
			.filter(item => item.checked)
			.map(item => ({
				[item.value]: item.degree
			}))
		)
		for (let i in _phase) {
			data.append(`phase[${i}]`, _phase[i])
		}

		if (tab2.value != 5) {
			data.append('user_list[0][longitude]', options.value._user_list[1].longitude)
			data.append('user_list[0][latitude]', options.value._user_list[1].latitude)
			data.append('user_list[0][tz]', options.value._user_list[1].tz)
			data.append('user_list[0][birthday]', options.value._user_list[1].birth)
			data.append('user_list[1][longitude]', options.value._user_list[0].longitude)
			data.append('user_list[1][latitude]', options.value._user_list[0].latitude)
			data.append('user_list[1][tz]', options.value._user_list[0].tz)
			data.append('user_list[1][birthday]', options.value._user_list[0].birth)
		} else {
			data.append('longitude', options.value._user_list[1].longitude)
			data.append('latitude', options.value._user_list[1].latitude)
			data.append('tz', options.value._user_list[1].tz)
			data.append('birthday', options.value._user_list[1].birth)
			data.append('tomorrow_type', 1)
			data.append('tomorrow_number', 99)
		}
		if ([3, 4, 6, 7].includes(tab2.value)) {
			data.append('transitday', secondBirthTime.value)
		}

		let url = requestOptions.base + requestOptions.tabs2[tab2.value]
		console.log(url)
		console.log(data)
		uni.showLoading({
			title: '生成中'
		})
		uni.request({
			url: url + `?${data.get()}`,
			method: 'POST'
		}).then(res => {
			console.log(res)
			let {
				data: resData
			} = res
			let {
				data,
				msg
			} = resData
			uni.showToast({
				title: msg || '参数错误',
				icon: 'none'
			})
			let {
				svg
			} = data
			let mid = JSON.parse(JSON.stringify(data))
			let house = JSON.parse(JSON.stringify(mid.house))
			// let house = mid.house
			let planetArr = [...mid.planet.map(item => item.planet_chinese)]
			let planetArrSvg = ''

			outerLoop:
				for (let i = 0; i < planetArr.length; i++) {
					for (let j = 0; j < planetArr.length; j++) {
						if (planetArr[i - 1] == planetArr[j - 1]) continue outerLoop
						let planet = mid.planet.find(item => item.planet_chinese == planetArr[i])
						let degree = planet.planet_allow_degree.find(item => item.planet_chinese == planetArr[j])
						let text = degree ? cases.value[degree.allow] : ''
						let color = '#333',
							bg = 'transparent'
						if (text) {
							color = `rgb(${casesColor.value[degree.allow]})`
							bg = `rgba(${casesColor.value[degree.allow]}, 0.3)`
						}
						planetArrSvg += `
							<rect x="${(j + 1) * 50}" y="${i * 50}" width="50" height="50"
								fill="${bg}" stroke="#e9e9e9" stroke-width="2"/>
							<text x="${(j + 1) * 50 + 25}" y="${i * 50 + 25}"
								font-family="Arial" font-size="22"
								text-anchor="middle" dominant-baseline="middle" fill="${color}">${text}</text>
						`
					}
				}
			for (let i = 0; i < planetArr.length; i++) {
				let text = planetArr[i]
				if (text.length > 2) {
					text = text.replace('星', '')
				}
				planetArrSvg += `
					<rect x="${(i + 1) * 50}" y="${i * 50}" width="50" height="50"
						fill="#f7f7f7" stroke="#e9e9e9" stroke-width="2"/>
					<text x="${(i + 1) * 50 + 25}" y="${i * 50 + 25}"
						font-family="Arial" font-size="22"
						text-anchor="middle" dominant-baseline="middle">${text}</text>
				`
				if (i > 0) {
					planetArrSvg += `
						<rect x="0" y="${i * 50}" width="50" height="50"
							fill="#f7f7f7" stroke="#e9e9e9" stroke-width="2"/>
						<text x="25" y="${i * 50 + 25}"
							font-family="Arial" font-size="22"
							text-anchor="middle" dominant-baseline="middle">${text}</text>
					`
				}
			}
			planetArrSvg =
				`<svg xmlns="http://www.w3.org/2000/svg" width="${50 * (planetArr.length + 1)}" height="${50 * planetArr.length}">` +
				planetArrSvg + '</svg>'
			mid.planetArrSvg = `data:image/svg+xml;base64,${btoa(planetArrSvg)}`
			// console.log(mid.planetArrSvg)
			mid.house = mid.house.map(item => {
				if (item.planet_array.length) {
					item.fly_house = house.find(e => e.main_planet[0].planet_font == item.planet_array[0].planet_font)
					return item
				}
				return item
			})
			if (tab2.value == 5) {
				let planet = mid.planet
				for (let i in planet) {
					mid.planet[i].Xiantian = {}
					let congenital_score = planet[i].congenital_score.list
					for (let j in congenital_score) {
						let type = congenital_score[j].type
						if (type == 3) {
							let _list = congenital_score[j].list
							let text = ''
							for (let k in _list) {
								let find = planet.find(item => item.code_name == _list[k].planet_code)
								if (find) {
									text += find.planet_font + ''
								}
							}
							mid.planet[i].Xiantian[type] = text
						} else {
							mid.planet[i].Xiantian[type] = mid.planet.find(item => item.code_name == congenital_score[j]
								.planet_code).planet_font
						}
					}
				}
				// console.log(mid.planet.map(item => item.Xiantian))
			}
			delete mid.svg
			_svgOptions.value = mid
			_svg.value = svg
			uni.hideLoading()
			closePopup()
		}).catch(e => {
			console.log(e, 'ssss')
			uni.showToast({
				title: '未知错误',
				icon: 'none'
			})
			uni.hideLoading()
		})
	}

	class FormData {
		constructor() {
			this.data = []
		}

		append(key, value) {
			this.data.push(`${key}=${value}`)
		}

		get() {
			return this.data.join('&')
		}
	}
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss">
	@import '@/static/css/xingpan-style.css';

	:deep(.uni-navbar__header-container) {
		display: flex;
		justify-content: center;
		align-items: center;
		// padding: 0 !important;
	}

	:deep(.uni-navbar__header-btns.uni-navbar__header-btns-left) {
		width: 60rpx !important;
	}

	:deep(.uni-navbar__header-btns.uni-navbar__header-btns-right) {
		display: none !important;
	}

	.box-double {
		.box-left {
			.name {
				align-self: flex-end;
				height: 46rpx;
				background: linear-gradient(90deg, rgba(162, 95, 255, 0) 0%, #C498FF 49%, rgba(162, 93, 254, 0) 100%);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 46rpx;
				padding: 0 19rpx;
				margin-bottom: 10rpx;
				width: 200rpx;
				text-align: center;
			}
		}

		.box-right {
			.name {
				height: 46rpx;
				background: linear-gradient(90deg, rgba(95, 170, 255, 0) 0%, #98CCFF 49%, rgba(93, 152, 254, 0) 100%);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #4766B3;
				line-height: 46rpx;
				padding: 0 19rpx;
				margin-top: 10rpx;
				width: 200rpx;
				text-align: center;
			}
		}

		.box-avatar {
			position: relative;
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
			overflow: hidden;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.box-supplement {
		background: linear-gradient(180deg, #E9F6FF 0%, #FFFFFF 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		overflow: hidden;

		.title {
			position: relative;
			height: 80rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #1B2043;
			line-height: 56rpx;
			background: url(/static/test/bg_title.png) no-repeat;
			background-size: cover;

			.box-choose {
				position: absolute;
				top: 26rpx;
				right: 40rpx;
			}
		}

		.box-desc {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 56rpx;
			padding: 28rpx 40rpx;
		}
	}

	.btn-pay {
		.btn_pay_red {
			background: url('/static/test/btn_pay_red.png') no-repeat;
			background-size: cover;
			width: 690rpx;
			height: 80rpx;
		}

		.btn_pay_blue {
			background: url('/static/test/btn_pay_blue.png') no-repeat;
			background-size: cover;
			width: 690rpx;
			height: 80rpx;
		}

		text {
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 28rpx;
		}

		.pay-num {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 12rpx;
			padding: 6rpx 10rpx;

			text {
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
				line-height: 22rpx;
				margin-left: 6rpx;
			}
		}
	}

	.bg-time {
		background: url(/static/test/bg_time.png) no-repeat;
		background-size: cover;
		width: 100rpx;
		height: 56rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.bg-params {
		background: url(/static/test/bg_params.png) no-repeat;
		background-size: cover;
		width: 100rpx;
		height: 56rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-left: -10rpx;
	}

	.bg-btn {
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		background: linear-gradient(89deg, #77A0FF 0%, #0094FF 100%);
		border-radius: 58rpx 58rpx 58rpx 58rpx;
	}

	.svg-box-outer {
		background: var(--background);
	}

	.svg-box {
		width: 100%;
		height: 100%;
	}

	.svg-box svg {
		width: 100%;
		height: 100%;
	}

	#zodiac {
		fill: var(--roll) !important;
	}

	#zodiac_min,
	#hcircle,
	#hcircle_min {
		fill: var(--background) !important;
	}

	.group-select {
		display: flex;
		align-items: center;
	}

	.options-popup-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #54b5ff;
	}

	.options-popup-title-button {
		color: #fff;
		background: #54b5ff;
		height: 50rpx;
		width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		font-size: 24rpx;
		padding-top: 2rpx;
	}

	.options-popup-box {
		height: 80vh;
	}

	.options-item {
		padding: 20rpx 20rpx 0;
	}

	.options-item:nth-child(1) {
		padding-top: 0;
	}

	.options-item:nth-last-child(1) {
		padding-bottom: 60rpx;
	}

	.options-title {
		font-size: 28rpx;
		font-weight: bold;
		padding-top: 20rpx;
	}

	.options-line {
		font-size: 24rpx;
		padding-top: 20rpx;
		align-items: center;
	}

	.user-card {
		border: 1px solid #54b5ff;
		margin: 20rpx 20rpx 0;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.user-card:nth-child(1) {
		margin-top: 0;
		padding: 20rpx;
	}

	.user-card>* {
		margin-top: 20rpx;
	}

	.user-card>*:nth-child(1) {
		margin-top: 0;
	}

	.uni-date__x-input {
		font-size: 24rpx !important;
	}

	.uni-data-tree-input .selected-item {
		font-size: 24rpx !important;
	}

	.tab-box-in {
		display: flex;
		width: auto;
		max-width: 10000px;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20rpx;
	}

	.tab-item text {
		white-space: nowrap;
		transition: all 0.2s;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		line-height: 32rpx;
		padding: 10rpx 0;
	}

	.tab-item view {
		transition: ease 0.2s;
	}

	.tab-item-active text {
		font-weight: 400;
		font-size: 32rpx;
		line-height: 32rpx;
		-webkit-text-stroke: 1px #76B1FF;
	}

	.tab-line {
		background: transparent;
		width: 48rpx;
		height: 10rpx;
	}

	.tab-line-active {
		background: url(/static/icons/choose.png) no-repeat;
		background-size: cover;
		width: 48rpx;
		height: 10rpx;
	}

	.skin {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		box-sizing: border-box;
		border: 18rpx solid #329eff;
		position: relative;
	}

	.skin-select {
		position: absolute;
		bottom: 0;
		right: 0;
		zoom: 70%;
		transform: translate(68%, 50%);
		pointer-events: none;
	}

	.users-box {
		position: absolute;
		top: 0;
		transform: translateY(-178%);
		font-size: 30rpx;
		left: 80rpx;
		z-index: 99;
	}

	.users-box:nth-last-child(1) {
		left: unset;
		right: 30rpx;
	}

	.users-box image {
		width: 32rpx;
		height: 32rpx;
	}

	.users-box-hide {
		pointer-events: none;
		opacity: 0;
	}

	.flex-1 {
		flex: 1;
	}

	.flex-2 {
		flex: 2;
	}

	.options-table {
		border: 1px solid #f5e0c5;
		border-radius: 16rpx;
		text-align: center;
		color: #333;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.options-table-line {
		border-bottom: 1px solid #f5e0c5;
	}

	.options-table-line:nth-child(1) text {
		background: linear-gradient(to right, #fbead8, #f5e0c5);
	}

	.options-table-line:nth-last-child(1) {
		border-bottom: none
	}

	.options-table text {
		padding: 16rpx 10rpx;
		border-right: 1px solid #f5e0c5;
		white-space: nowrap;
		box-sizing: border-box;
	}

	.options-symbol {
		font-size: 30rpx;
		font-family: 'web_ixingpan';
	}

	.options-table text:nth-last-child(1) {
		border-right: none;
	}

	.uni-date-x .icon-calendar {
		display: none;
	}

	.uni-date__x-input {
		padding-left: 0;
		text-align: center;
	}

	.uni-date-x {
		border-radius: 50rpx !important;
		box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);
	}

	.select-time-box {
		position: relative;
	}

	.select-time-icon:nth-child(1) {
		position: absolute;
		top: 50%;
		left: 20rpx;
		transform: translateY(-50%);
		z-index: 99;
	}

	.select-time-icon:nth-last-child(1) {
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
	}

	.select-time-icon {
		pointer-events: none;
	}

	.xiantian .flex-1 {
		width: calc(100% / 16);
	}

	.xiantian .flex-2 {
		width: calc(100% / 16 * 2);
	}

	.xiantian .flex-3 {
		width: calc(100% / 16 * 3);
	}

	.houtian .flex-1 {
		width: calc(100% / 19);
	}

	.houtian .flex-2 {
		width: calc(100% / 19 * 2);
	}

	.houtian .flex-5 {
		width: calc(100% / 19 * 5);
	}

	.houtian .flex-7 {
		width: calc(100% / 19 * 7);
	}
</style>